<!DOCTYPE html>
<html>
 
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    /* 去掉li标签自带的样式 点 */
    ul {
      list-style: none;
    }
 
    .wrap {
      width: 1000px;
      margin: 50px auto;
    }
 
    .slider {
      width: 1000px;
      height: 400px;
      border: 1px solid red;
      overflow: hidden;
    }
 
    .slider li {
      width: 200px;
      height: 400px;
      float: left;
      cursor: pointer;
      /* 过渡属性 */
      transition: all .4s;
    }
  </style>
 
  <script>
    /*
      需求：
        1.动态的给所有的li，添加背景图片
        2.鼠标移入，让当前变宽，让其他变窄
        3.鼠标移入，恢复原状
    */
    // 浏览器加载事件   当浏览器资源加载完毕后自动执行。
    window.addEventListener("load", function () {
      // 查找元素 所有li标签   伪数组
      var lis = document.querySelectorAll(".slider li");
      // for循环遍历 让所有li标签都可以作用到
      for (var i = 0; i < lis.length; i++) {
        // 给每一个li标签的绑定一个鼠标移入的事件
        lis[i].addEventListener("mouseover", function () {
          // 排他事件  1.1 排除其他
          for (var i = 0; i < lis.length; i++) {
            // 让li标签的宽度变成50像素
            lis[i].style.width = (1000 - 800) / 4 + "px";
          }
          // 排他事件  1.2 确立当前  鼠标移入的那一个li标签变成800像素
          this.style.width = 800 + "px";
        })
        // 给li标签添加一个鼠标移出的事件
        lis[i].addEventListener("mouseout", function () {
          // for循环遍历 
          for (var i = 0; i < lis.length; i++) {
            // 当鼠标移出的时候让所有li标签的宽度都变成200像素
            lis[i].style.width = 200 + "px";
          }
        });
      }
    })
  </script>
</head>
 
<body>
  <div class="wrap">
    <ul id="slider" class="slider">
      <li>
        <img src="https://img1.baidu.com/it/u=3516383346,4217835889&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=450" alt="">
      </li>
      <li>
        <img src="https://img0.baidu.com/it/u=2270301222,2394774971&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=450" alt="">
      </li>
      <li>
        <img src="https://img1.baidu.com/it/u=2697924939,2377002144&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
      </li>
      <li>
        <img src="https://img2.baidu.com/it/u=432137057,482901530&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=410" alt="">
      </li>
      <li>
        <img src="https://img0.baidu.com/it/u=3322143232,1203532692&fm=253&fmt=auto&app=138&f=JPEG?w=821&h=500" alt="">
      </li>
    </ul>
  </div>
</body>
 
</html>